<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>28因素岗位价值评估工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        body {
            font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        .prose p { margin-bottom: 0.5em; }
        .prose ul { margin-top: 0.5em; }
        .prose li { margin-bottom: 0.25em; }
        .radio-label:has(input:checked) {
            background-color: #4f46e5;
            color: white;
            border-color: #4f46e5;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 flex items-center justify-center min-h-screen">

    <div class="container mx-auto p-4 max-w-2xl w-full">
        <div id="app-container" class="bg-white rounded-2xl shadow-lg p-6 sm:p-8 transition-all duration-300">

            <!-- 阶段 1: 岗位选择 -->
            <div id="job-selection-screen">
                <div class="text-center">
                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">岗位价值评估</h1>
                    <p class="mt-2 text-gray-600">请选择您需要评估的岗位，然后开始评分。</p>
                </div>
                <div class="mt-8">
                    <label for="job-title" class="block text-sm font-medium text-gray-700 mb-2">岗位名称</label>
                    <select id="job-title" name="job-title" class="mt-1 block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md shadow-sm">
                        <!-- 岗位名称将由JS动态填充 -->
                    </select>
                </div>
                <div class="mt-8">
                    <button id="start-voting-btn" class="w-full bg-indigo-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-transform transform hover:scale-105">
                        开始评估
                    </button>
                </div>
            </div>

            <!-- 阶段 2: 评分 -->
            <div id="voting-screen" class="hidden">
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-2">
                         <h2 class="text-xl font-bold text-gray-900 truncate" id="current-job-title-display"></h2>
                         <span id="progress-text" class="text-sm font-medium text-gray-500"></span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div id="progress-bar" class="bg-indigo-600 h-2.5 rounded-full transition-all duration-300" style="width: 0%"></div>
                    </div>
                </div>

                <div id="factor-card" class="bg-gray-50 p-5 rounded-xl border border-gray-200">
                    <p id="factor-category" class="text-sm font-semibold text-indigo-700 mb-2"></p>
                    <h3 id="factor-name" class="text-lg font-bold text-gray-900 mb-3"></h3>
                    <div class="prose prose-sm max-w-none text-gray-600">
                       <p class="font-semibold">【因素定义】</p>
                       <p id="factor-definition"></p>
                       <p class="font-semibold mt-4">【评分标准】</p>
                       <ul id="factor-criteria"></ul>
                    </div>
                </div>

                <div class="mt-6">
                    <p class="text-sm font-medium text-gray-700 mb-3">请选择分值：</p>
                    <div id="score-options" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
                        <!-- 分值选项将由JS动态填充 -->
                    </div>
                </div>
                
                <div class="mt-8 flex justify-between items-center">
                    <button id="prev-btn" class="bg-gray-200 text-gray-700 font-bold py-2 px-6 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">上一题</button>
                    <button id="next-btn" class="bg-indigo-600 text-white font-bold py-2 px-6 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">下一题</button>
                </div>
            </div>
            
            <!-- 阶段 3: 完成 & 下载 -->
            <div id="summary-screen" class="hidden text-center">
                 <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-4">
                    <svg class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                 </div>
                <h2 class="text-2xl font-bold text-gray-900">评估完成！</h2>
                <p class="mt-2 text-gray-600">您已完成对岗位 <strong id="final-job-title" class="text-indigo-600"></strong> 的所有因素评估。</p>
                <p class="mt-1 text-gray-600">总分: <strong id="total-score" class="text-2xl text-indigo-600"></strong></p>
                <div class="mt-8 space-y-4">
                    <button id="download-csv-btn" class="w-full bg-green-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-transform transform hover:scale-105">
                        下载评估结果 (CSV)
                    </button>
                     <button id="restart-btn" class="w-full bg-gray-200 text-gray-700 font-bold py-3 px-4 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">
                        评估另一个岗位
                    </button>
                </div>
            </div>

        </div>
        <footer class="text-center mt-6 text-xs text-gray-400">
            <p>&copy; 2024 岗位价值评估工具</p>
        </footer>
    </div>

<script>
document.addEventListener('DOMContentLoaded', () => {

    // --- 数据定义 ---
    // 从图片中提取的岗位名称
    const jobTitles = [
        "总经理", "副总经理", "财务主管", "会计兼出纳", "管理主管", "人事BP", "后勤员", 
        "储运主管", "储运助理", "储运商务兼采购", "储运售后兼结算", "分拣员", "主运管", 
        "运营", "内容运营", "直播组长", "主播", "设计主管", "设计副主管", "电商设计师", 
        "摄影师", "剪辑师", "线下设计师", "客服组长", "售前", "售后", "零售主管", 
        "店长", "店员/店助", "渠道主管", "业务员"
    ];

    // 从CSV文件中解析的28个因素数据
    const factors = [
        { category: '岗位责任因素', name: '风险控制的责任', definition: '指在不确定的条件下，为保证贸易、投资、产品开发及其他项目顺利进行，并维持我方合法权益所应担负的责任，该责任的大小以失败后损失、影响的大小作为判断标准。', criteria: ['无任何风险', '仅有一些小的风险。一旦发生问题，不会给公司造成多大影响', '有一定的风险。一旦发生问题，给公司所造成的影响能明显感觉到', '有较大的风险。一旦发生问题，会给公司带来较严重的损害', '有极大风险。一旦发生问题，对公司造成的影响不仅不可挽回，而且会致使公司发生经济危机乃至倒闭'], scores: [0, 20, 40, 60, 80] },
        { category: '岗位责任因素', name: '成本控制的责任', definition: '指在正常工作状态下，因工作疏忽而造成可能的成本、费用、利息等额外损失所应承担的责任。其责任大小，由损失金额的多少作为判断基准。', criteria: ['不可能造成成本费用等方面的损失或损失金额少于100元', '造成较小的损失，100～1000元', '造成较大的损失，1000～10000元', '造成重大的损失，10000～50000元', '造成不可估量的损失，50000元以上'], scores: [5, 10, 20, 30, 40] },
        { category: '岗位责任因素', name: '指导监督的责任', definition: '指在正常权力范围内所执行的正式指导、监督。其责任大小根据所监督、指导的人员数量和层次进行判断（3个基层员工可以折合成一个基层管理人员，3个基层管理人员可以折合成一个中层管理人员）。', criteria: ['不指导、监督任何人', '监督、指导3～5个基层员工，或者1个基层管理人员', '监督、指导6～9个基层员工，或者2个基层管理人员', '监督、指导4个以上基层管理人员，或者2～3个中层管理人员', '监督、指导4个以上中层管理人员', '监督、指导8个以上中层管理人员'], scores: [0, 10, 15, 20, 30, 40] },
        { category: '岗位责任因素', name: '内部协调的责任', definition: '指在正常工作中需要与内部人员合作所进行的协调活动。其责任的大小以所协调对象的所在层次、人员数量、频繁程度以及协调不佳所造成的不良后果大小作为判断基准。', criteria: ['不需要与任何人进行协调，若有，也是偶尔与本部门的一般职工协调', '仅与本部门职工进行工作协调，偶尔与其他部门进行一些个人协调，协调不力一般不影响自已和他人的正常工作', '与本部门和其他部门职工有密切的工作联系，协调不力会影响双方的工作', '几乎与本公司所有一般职工有密切的工作联系，或与部分部门负责人有工作协调的必要。协调不力对公司有一定的影响', '与各部门负责人有密切的工作联系，在工作中需要保持随时联系和沟通，协调不力对整个公司有重大影响'], scores: [0, 7, 15, 22, 30] },
        { category: '岗位责任因素', name: '外部协调的责任', definition: '指在正常工作中需维持的密切的外部工作关系，以便顺利开展工作方面所负有的责任，其责任大小由对工作的重要性作为判断标准。', criteria: ['不需要与外界保持密切联系。若有，也仅限于一般工作人员，且偶然性极强', '工作需要与外界几个固定部门的一般人员发生较频繁的业务联系，所开展的业务属于常规性的', '需要与客户、政府机构、外部机构保持密切的联系，联系的原因限于具体业务范围内', '需要与上级或其他主管部门的负责人保持密切联系，频繁沟通，联系的原因往往涉及重大问题或者重要决策'], scores: [0, 10, 20, 30] },
        { category: '岗位责任因素', name: '工作结果的责任', definition: '指对工作结果承担多大的责任。以工作结果对公司影响的大小作为判断责任大小的基准。', criteria: ['只对自已的工作结果负责', '需要对自已和所监督指导者的工作结果负责', '对整个部门的工作结果负责', '对整个公司的部分部门或部分业务的工作结果负责', '对全公司的工作结果负责'], scores: [10, 15, 25, 30, 40] },
        { category: '岗位责任因素', name: '组织的责任', definition: '指在正常工作中，对人员的选拔、聘用、考核、工作分配、激励等具有法定的权利和责任。其责任大小以人事决策的层次作为判断基准。', criteria: ['不对别人有人事责任', '对少数职工有分配工作任务、考核和激励的责任', '对少数部门负责人有分配工作任务、考核和激励的责任', '对不同业务模块的负责人有分配工作任务、考核和激励的责任'], scores: [0, 15, 30, 50] },
        { category: '岗位责任因素', name: '法律的责任', definition: '指在正常工作中需要拟定和签署具有法律效力的合同，并对合同的结果负有相应的责任。其责任的大小视签约、拟定合同的重要性及后果严重性作为判断基准。', criteria: ['不参与有关法律合同的制定和签约；或者在工作中对具有法律效力的合同条文的拟定仅提供建议，而对结果不负责任', '需要偶尔拟定具有法律效力的合同条文，并对结果负部分责任', '需要经常拟定具有法律效力的合同条文，并对结果负部分责任', '工作经常需要审核各种业务或其他具有法律效力的合同（或技术协议），并对结果负有全部责任'], scores: [0, 10, 15, 20] },
        { category: '岗位责任因素', name: '决策的层次', definition: '指在正常的工作中需要参与决策。其责任的大小以所参与决策的层次高低作为判断基准。', criteria: ['工作中常做一些小的决定，一般不影响他人', '工作中需要做一些对所属人员有影响的决策', '工作中需要做一些大的决策，但须与其他部门负责人共同协商方可', '工作中需要参加最高层次决策'], scores: [10, 20, 30, 45] },
        { category: '知识技能因素', name: '最匹配学历要求', definition: '指顺利履行工作职责所要求的最适宜的学历要求。其判断基准按正规教育水平判断。', criteria: ['高中以下', '高中、技校或中专毕业', '大学专科', '大学本科及以上', '硕士及以上'], scores: [5, 10, 15, 20, 30] },
        { category: '知识技能因素', name: '知识的多样性', definition: '指在顺利履行工作职能时需要使用多种学科、专业领域的知识。判断基准在于广博，不在精深。', criteria: ['不需要涉及其他专业知识', '需要相近专业知识的支持', '需要两门跨专业学科知识支持', '需要两门以上跨专业学科知识支持'], scores: [0, 10, 20, 30] },
        { category: '知识技能因素', name: '沟通协调复杂度', definition: '指岗位在履职过程中，为达成工作目标需承担的跨层级、跨部门或跨组织沟通协调的难度及广度，包括信息传递的层级跨度、利益相关方多样性、冲突调解强度及对组织目标的直接影响程度。', criteria: ['单一部门内标准化信息传递，无冲突调解需求', '协调2-3个平行部门常规协作，解决简单流程冲突', '跨层级整合多部门资源，化解重大利益矛盾并影响决策', '通过谈判影响外部合作伙伴战略'], scores: [5, 10, 15, 20] },
        { category: '知识技能因素', name: '工作复杂性', definition: '指工作内容或职责的复杂程度。其判断基准根据所需的判断分析、计划等水平而定。', criteria: ['简单的、不需计划和独立判断', '需进行专门训练才可胜任工作，但大部分时候仅需一种专业技术，偶尔需要进行独立判断或计划', '工作时需要运用多种专业技能，经常做独立判断和计划', '工作要求高度的判断力和计划性'], scores: [5, 10, 20, 40] },
        { category: '知识技能因素', name: '工作经验', definition: '指员工在上岗前为达到本项工作的基本要求所花费的实际工作时间（如，应拥有5年以上财务管理及业务经验方具备财务部经理任职资格，即相关工作经验）。', criteria: ['12个月以内', '1~2年', '2~5年', '5~10年', '10年以上'], scores: [5, 10, 20, 30, 40] },
        { category: '知识技能因素', name: '工作灵活性', definition: '指工作中需要处理事情的灵活程度。判断基准取决于工作职责要求。', criteria: ['属于常规性工作，很少或不需要灵活性。', '大部分属于常规性工作，偶尔需要灵活处理一些一般性问题。', '工作中一半属于常规性的，经常需要灵活性处理工作中所出现的问题。', '工作中一大半属于非常规性的，主要靠自已灵活地按具体情况进行妥善处理。', '工作非常规，需要在复杂多变的环境中灵活地处理重大的偶然性问题。'], scores: [0, 10, 20, 30, 40] },
        { category: '知识技能因素', name: '文字应用能力', definition: '指工作所需要的实际运用语言文字知识的能力。', criteria: ['不需要编写任何文字材料', '运用语言文字知识，编写一般信函、简报、备忘录和通知', '较熟练的运用语言文字知识，编写文案、详情页、报告、汇报文件、总结（非个人）', '熟练运用语言文字知识，编写企业文件（制度等）或者需要熟练掌握外语'], scores: [0, 5, 15, 25] },
        { category: '知识技能因素', name: '计算机知识', definition: '指工作所要求的实际计算机操作水平。判断以常规使用的最高程度为基准。', criteria: ['不需要具备计算机操作能力', '会操作办公软件（如Office软件、办公自动化软件、图形、视频等处理软件）', '熟练使用业务软件，对计算机方面的常用问题能够处理', '能使用计算机开发工具软件'], scores: [0, 5, 15, 25] },
        { category: '知识技能因素', name: '专业技术知识技能', definition: '指为顺利履行工作职责所应具备专业技术知识和技能要求的程度。', criteria: ['基本不需要专业技术知识', '只需要一般的专业技术知识和常规技能', '工作需要较深入专业知识和一般技能，该知识需较长时间学习积累才可掌握', '工作需要深入的专业知识和熟练的技能，该知识需很长时间学习积累才可掌握'], scores: [0, 10, 20, 40] },
        { category: '知识技能因素', name: '管理知识技能', definition: '指为了顺利完成工作目标，组织协调相关人员进行工作所需要的素质和能力。判断基准是工作中进行组织协调的程度和组织协调工作的影响。', criteria: ['工作简单，基本不需要管理知识', '工作需要基本的管理知识和决断能力', '需要较强的管理知识和决断能力来协调各方面关系', '需要非常强的管理能力和决断能力，该工作影响到公司正常运作、管理与经营'], scores: [0, 10, 20, 35] },
        { category: '知识技能因素', name: '综合能力', definition: '指为顺利履行工作职责所应具备的多种知识素质、经验和能力要求。', criteria: ['工作单一、简单，无需特殊技能和能力', '工作规范化、程序化，仅需某方面的专业知识和技能', '工作多样化，灵活处理问题要求高，需综合使用多种知识和技能', '非常规性工作，需在复杂多变的环境中处理事务，需要高度综合能力'], scores: [5, 15, 30, 50] },
        { category: '岗位性质因素', name: '工作压力', definition: '指工作本身给任职人员带来的压力。以决策迅速性、工作常规性、任务多样性、工作流动性及工作是否时常被打断为标准进行判断。', criteria: ['工作常规化，工作很少被打断或者干扰', '工作速度没有特定要求，手头的工作有时被打断，有时需要迅速决定', '经常要求迅速作出决定，任务多样化，手头的工作常被打断，或工作流动性强', '经常迅速作出决定，任务多样化，工作时间很紧张，或工作流动性很强，很难坐下来安静地'], scores: [10, 20, 30, 40] },
        { category: '岗位性质因素', name: '脑力辛苦程度', definition: '指对在工作时注意力集中程度的要求。根据集中精力的时间、频率等进行判断。', criteria: ['工作时以体力为主，心神、视力与听觉等随便', '工作时不须高度集中精力，只从事一般强度脑力劳动', '一半工作时间必须高度集中精力，从事高强度脑力劳动', '多数工作时间必须高度集中精力，从事高强度脑力劳动'], scores: [10, 20, 30, 40] },
        { category: '岗位性质因素', name: '体力要求', definition: '指在工作中对体力的要求。判断基准为工作姿势、持续时间长度和用力大小等。', criteria: ['工作时姿势随意，耗费体力不大', '站立或久坐时间占全部时间的50%以下，需要耗费一定的体力', '站立或久坐时间占全部时间的50%以上，需要耗费比较多的体力', '站立或久坐时间占全部时间的50%以上，需要耗费非常多的体力'], scores: [0, 10, 15, 20] },
        { category: '岗位性质因素', name: '创新与开拓', definition: '指顺利进行工作所必需的创新与开拓精神或能力的要求。', criteria: ['全部工作为程序化、规范化，无需开拓创新', '工作基本规范化，偶尔需要开拓创新', '工作时常需要开拓和创新', '工作性质本身即为开拓和创新的'], scores: [0, 10, 20, 30] },
        { category: '岗位性质因素', name: '工作紧张程度', definition: '指工作的节奏、时限、工作量、注意力转移程度和对工作所需细节的重视所引起的工作紧迫感。', criteria: ['工作的节奏、时限自已掌握，没有紧迫感', '大部分时间的工作节奏、时限自已掌握，有时比较紧张，但时间持续不长', '工作的节奏、时限自已无法控制，明显感到工作紧张', '为完成每日工作需要加快工作节奏，持续保持注意力的高度集中，每天下班时经常明显感到疲劳'], scores: [5, 10, 20, 40] },
        { category: '岗位性质因素', name: '工作均衡性', definition: '指工作每天忙闲不均的程度。', criteria: ['一般没有忙闲不均的现象', '有时忙闲不均，但有规律性', '经常有忙闲不均的现象，且没有明显的规律', '工作经常忙闲不均，且忙的时间持续很长，需打破正常的作息时间'], scores: [4, 8, 15, 30] },
        { category: '工作环境因素', name: '职业病或危险性', definition: '因工作所造成的身体疾病，或工作本身对任职者身体可能造成的危害。', criteria: ['无职业病的可能，或没有可能对身体造成危害', '会对身体某些部位造成轻度伤害，或不注意可能造成人体轻度伤害', '对身体某些部位造成能明显感觉到的损害，或发生意外可造成明显伤害', '对身体某部位造成损害致使产生痛苦，或工作危险大，有可能造成很大伤害'], scores: [0, 5, 15, 20] },
        { category: '工作环境因素', name: '工作时间特征', definition: '指工作要求的特定起止时间。', criteria: ['按正常时间上下班', '基本按正常时间上下班，偶尔需要加班', '上下班时间按工作具体情况而定，但有一定规律，自已可以控制、安排', '上下班时间根据工作具体情况而定，无规律可循，自己无法控制、安排'], scores: [10, 15, 20, 30] }
    ];

    // --- 状态管理 ---
    let currentFactorIndex = 0;
    let selectedJobTitle = '';
    let userScores = new Array(factors.length).fill(null);

    // --- DOM 元素 ---
    const jobSelectionScreen = document.getElementById('job-selection-screen');
    const votingScreen = document.getElementById('voting-screen');
    const summaryScreen = document.getElementById('summary-screen');

    const jobTitleSelect = document.getElementById('job-title');
    const startBtn = document.getElementById('start-voting-btn');

    const currentJobTitleDisplay = document.getElementById('current-job-title-display');
    const progressText = document.getElementById('progress-text');
    const progressBar = document.getElementById('progress-bar');
    const factorCategory = document.getElementById('factor-category');
    const factorName = document.getElementById('factor-name');
    const factorDefinition = document.getElementById('factor-definition');
    const factorCriteria = document.getElementById('factor-criteria');
    const scoreOptions = document.getElementById('score-options');
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');
    
    const finalJobTitle = document.getElementById('final-job-title');
    const totalScoreEl = document.getElementById('total-score');
    const downloadBtn = document.getElementById('download-csv-btn');
    const restartBtn = document.getElementById('restart-btn');

    // --- 函数 ---

    // 初始化App
    function init() {
        // 填充岗位下拉列表
        jobTitles.forEach(title => {
            const option = document.createElement('option');
            option.value = title;
            option.textContent = title;
            jobTitleSelect.appendChild(option);
        });
        
        // 绑定事件
        startBtn.addEventListener('click', startVoting);
        prevBtn.addEventListener('click', showPreviousFactor);
        nextBtn.addEventListener('click', showNextFactor);
        downloadBtn.addEventListener('click', downloadCSV);
        restartBtn.addEventListener('click', () => location.reload());
    }

    // 开始评分
    function startVoting() {
        selectedJobTitle = jobTitleSelect.value;
        if (!selectedJobTitle) {
            alert('请选择一个岗位！');
            return;
        }
        currentJobTitleDisplay.textContent = `岗位: ${selectedJobTitle}`;
        jobSelectionScreen.classList.add('hidden');
        votingScreen.classList.remove('hidden');
        renderFactor(currentFactorIndex);
    }
    
    // 渲染指定因素
    function renderFactor(index) {
        // 平滑滚动到顶部
        window.scrollTo({ top: 0, behavior: 'smooth' });

        const factor = factors[index];
        factorCategory.textContent = factor.category;
        factorName.textContent = `${index + 1}. ${factor.name}`;
        factorDefinition.textContent = factor.definition;
        
        factorCriteria.innerHTML = '';
        factor.criteria.forEach((crit, i) => {
            const li = document.createElement('li');
            li.textContent = `${i+1}. ${crit} (分值: ${factor.scores[i]})`;
            factorCriteria.appendChild(li);
        });

        scoreOptions.innerHTML = '';
        factor.scores.forEach((score, i) => {
            const wrapper = document.createElement('div');
            const input = document.createElement('input');
            input.type = 'radio';
            input.name = 'score';
            input.value = score;
            input.id = `score-${i}`;
            input.className = 'sr-only';

            const label = document.createElement('label');
            label.htmlFor = `score-${i}`;
            label.textContent = score;
            label.className = 'radio-label block w-full text-center p-3 border-2 border-gray-300 rounded-lg cursor-pointer font-semibold transition-colors duration-200 hover:bg-indigo-100';
            
            if (userScores[index] !== null && score === userScores[index]) {
                input.checked = true;
            }

            input.addEventListener('change', () => {
                userScores[index] = parseInt(input.value);
                // 自动跳转到下一题，体验更流畅
                setTimeout(showNextFactor, 200);
            });

            wrapper.appendChild(input);
            wrapper.appendChild(label);
            scoreOptions.appendChild(wrapper);
        });

        updateProgress();
        updateNavButtons();
    }

    // 更新进度条和文本
    function updateProgress() {
        const progressPercentage = ((currentFactorIndex + 1) / factors.length) * 100;
        progressBar.style.width = `${progressPercentage}%`;
        progressText.textContent = `进度: ${currentFactorIndex + 1} / ${factors.length}`;
    }

    // 更新导航按钮状态
    function updateNavButtons() {
        prevBtn.disabled = currentFactorIndex === 0;
        prevBtn.classList.toggle('opacity-50', prevBtn.disabled);
        prevBtn.classList.toggle('cursor-not-allowed', prevBtn.disabled);
        
        if (currentFactorIndex === factors.length - 1) {
            nextBtn.textContent = '完成评估';
        } else {
            nextBtn.textContent = '下一题';
        }
    }

    // 显示上一题
    function showPreviousFactor() {
        if (currentFactorIndex > 0) {
            currentFactorIndex--;
            renderFactor(currentFactorIndex);
        }
    }
    
    // 显示下一题或完成
    function showNextFactor() {
        if (userScores[currentFactorIndex] === null) {
            // 轻微震动提示
            document.getElementById('app-container').classList.add('animate-shake');
            setTimeout(() => document.getElementById('app-container').classList.remove('animate-shake'), 500);
            alert('请为当前因素选择一个分值！');
            return;
        }

        if (currentFactorIndex < factors.length - 1) {
            currentFactorIndex++;
            renderFactor(currentFactorIndex);
        } else {
            showSummary();
        }
    }

    // 显示总结页面
    function showSummary() {
        finalJobTitle.textContent = selectedJobTitle;
        const totalScore = userScores.reduce((sum, score) => sum + score, 0);
        totalScoreEl.textContent = totalScore;
        votingScreen.classList.add('hidden');
        summaryScreen.classList.remove('hidden');
    }

    // 下载CSV文件
    function downloadCSV() {
        let csvContent = "data:text/csv;charset=utf-8,\uFEFF"; // \uFEFF for BOM to support UTF-8 in Excel
        csvContent += "岗位名称,因素分类,因素名称,选择分值\r\n";
        
        const totalScore = userScores.reduce((sum, score) => sum + score, 0);

        factors.forEach((factor, index) => {
            const row = [
                selectedJobTitle,
                factor.category,
                factor.name,
                userScores[index]
            ].join(',');
            csvContent += row + "\r\n";
        });
        
        // 添加总分行
        csvContent += "\r\n";
        csvContent += `总计,,,${totalScore}\r\n`;

        const encodedUri = encodeURI(csvContent);
        const link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", `岗位价值评估-${selectedJobTitle}.csv`);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    
    // 添加一个简单的动画效果
    const style = document.createElement('style');
    style.innerHTML = `
        @keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }
        .animate-shake {
            animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
        }
    `;
    document.head.appendChild(style);


    // --- 初始化 ---
    init();
});
</script>

</body>
</html>
